<template>
  <div>
    <el-color-picker
      v-model="theme"
      :predefine="['#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d', '#FF6700']"
      class="theme-picker"
      popper-class="theme-picker-dropdown"
      @change="setUserPreference"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ERR_OK } from 'config/statusCode'
import { setUserPreferenceApi } from 'api/home'
import { colorChange } from 'utils/tools'
import { setGlobalParams,getGlobalParams } from 'utils/headerToken'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const version = require('element-plus/package.json').version // element-ui version from node_modules
let theme = ref('#FF6700')

const setUserPreference = async (e) => {
  let params = {
    themeColor:e || '#FF6700'
  } 
  // 设置主题色
  const { code, data } = await setUserPreferenceApi(params,'preferenceKey')
  if (code === ERR_OK) { 
     colorChange(e)
     setGlobalParams(params)
      ElMessage({
      message: '设置成功',
      type: 'success'
    })
  }
}
onMounted(() => { 
  theme.value = JSON.stringify(getGlobalParams('getGlobalParams') || {}) !== '{}' && getGlobalParams('getGlobalParams')? getGlobalParams('getGlobalParams')?.themeColor : '#FF6700'
  colorChange(theme.value)
})
</script>

<style>
.theme-message,
.theme-picker-dropdown {
  z-index: 99999 !important;
}

.theme-picker .el-color-picker__trigger {
  height: 26px !important;
  width: 26px !important;
  padding: 2px;
}

.theme-picker-dropdown .el-color-dropdown__link-btn {
  display: none;
}
</style>
